<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板填充测试页</title>
</head>
<body>
<div class="v1"></div>
<div class="v2"></div>
<div class="v3"></div>
<div class="v4"></div>
<div class="v5"></div>
<div class="v6"></div>
<div class="v7"></div>
<div class="v8"></div>
<div class="v9"></div>
<script type="text/template" id="demo1">
    <h2>示例1</h2>
    <p>多级：{{a.b.c}}</p>
    <p>值为对象：{{a.d}}</p>
</script>
<script type="text/template" id="demo2">
    <h2>示例2</h2>
    <p>或选择：{{a.b.e|a.b.d|a.b.m}}</p>
</script>
<script type="text/template" id="demo3">
    <h2 class="{{a.c@Checked}}">示例3</h2>
    <p>参数带方法：{{a.d|a.b.c@toFun}}</p>
</script>
<script type="text/template" id="demo4">
    <h2>ng-if应用</h2>
    <div ng-if='{{a}}'>{{a}}   a==1</div>
    <div ng-if="{{b}}">{{b}}   b==true</div>
    <div ng-if="{{c}}">{{c}}   c==null</div>
    <div ng-if="{{d}}">{{d}}   d==undefined</div>
    <div ng-if="{{e}}">{{e}}   e==0</div>
    <div ng-if="{{f}}">{{f}}   f无</div>
    <div ng-if="{{g}}">{{g}}   g==''</div>
    <div ng-if="{{h}}">{{h}}   h==false</div>
    <div ng-if="{{i}}">{{i}}   i=='true'</div>
    <div ng-if="{{j}}">{{j}}   j=='false'</div>
    <div ng-if="{{k}}==8">{{k}}   k==8</div>
    <div ng-if="{{l}}=='m3'">{{l}}   l=='mm'</div>
</script>
<script type="text/template" id="demo5">
    <h2>ng-show应用</h2>
    <div ng-show="{{a}}">添加了ng-show样式</div>
    <div ng-show="{{b}}">没有添加ng-show</div>
    <div ng-show="{{c}}">没有添加ng-show</div>
    <div ng-show="{{d}}==5">添加了ng-show样式</div>
</script>
<script type="text/template" id="demo6">
    <h2>ng-hide应用</h2>
    <div ng-hide="{{a}}">添加了ng-hide样式</div>
    <div ng-hide="{{b}}">没有添加ng-hide</div>
    <div ng-hide="{{c}}">没有添加ng-hide</div>
    <div ng-hide="{{d}}==5">添加了ng-hide样式</div>
</script>
<script type="text/template" id="demo7">
    <h2>ng-class应用</h2>
    <div ng-class="c-Name-{{a}}">添加了新的class</div>
    <div class="abc" ng-class="nc-{{c|d}}==5">添加class</div>
</script>
<script type="text/template" id="demo8">
    <h2>ng-repeat应用</h2>
    <dl>
        <dt>{{title}}</dt>
        <ng-repeat repeat="list">
            <dd ng-if="'{{con|con.abc}}'!=''">条目{{ngRid}}:内容{{con|con.abc}}</dd>
        </ng-repeat>
    </dl>
</script>
<script type="text/template" id="demo9">
    <h2>ng-repeat两级嵌套</h2>
    <ng-repeat repeat="list">
        <dl>
            <dt>条目{{ngRid}}：--{{title}}</dt>
            <ngc-repeat repeat="sec">
                <dd>子条目{{ngRid}}：--{{con}}</dd>
            </ngc-repeat>
        </dl>
    </ng-repeat>
</script>
<script src="../../../dest/js/fui.js"></script>
<script>
fui.use('JsTpl',function(){
//    JsTpl('.v1').render({a:{b:{c:'内容哦'},d:{c:'212'}},c:'3333'},'demo1');
//    JsTpl('.v2').render({a:{b:{c:'ccc',d:'ddd',m:'mmm'},c:{d:"eee"}},m:{}},'demo2');
//    JsTpl('.v3').render({a:{b:{c:'123'},c:'11'},b:{d:'dd'}},'demo3');
//    JsTpl('.v4').render({a:1,b:true,c:null,d:undefined,e:0,g:'',h:false,i:'true',j:'false',k:8,l:'mm'},'demo4');
//    JsTpl('.v5').render({a:1,b:0,c:false,d:5},'demo5');
//    JsTpl('.v6').render({a:1,b:0,c:false,d:5},'demo6');
//    JsTpl('.v7').render({a:1,b:0,c:false,d:5},'demo7');
//    var d8={
//        title:"下面是列表哦",
//        list:[
//            {con:'aaa'},
//            {con:{abc:"123"}},
//            {con:{abc:{mm:'222'}}},
//            {con:'ccc'}
//        ]
//    };
//    JsTpl('.v8').render(d8,'demo8');
    var d9={
        list:[
            {
                title:'a',
                sec:[{con:'a1'},{con:'a2'},{con:'a3'}]
            }
            ,{
                title:'b',
                sec:[{con:'a1'},{con:'b2'},{con:'a3'},{con:'a4'},{con:'a5'}]
            },
            {
                title:'c',
                sec:[{con:'a1'},{con:'a2'}]
            },
            {
                title:'d',
                sec:[{con:'a1'},{con:'a2'},{con:'a3'}]
            },
            {
                title:'e',
                sec:[{con:'a1'},{con:'a2'},{con:'a3'},{con:'a3'}]
            },
            {
                title:'f',
                sec:[{con:'a1'},{con:'a2'},{con:'a3'},{con:'a3'}]
            },
            {
                title:'g',
                sec:[{con:'a1'},{con:'a2'},{con:'a3'}]
            }
        ]
    };
    JsTpl('.v9').render(d9,'demo9');
});
var toFun=function (d) {
    return d/25
}
</script>
</body>
</html>
